<template>
  <!-- 编写网页结构的模板 -->
  <div class="home">
  <h1>首页</h1>
  <h2>{{ msg }}</h2>
  <ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
    <li>无序列表5</li>
  </ul>
  <h1>{{ message }}</h1>
  <button @click="clickBtn">点击</button>
  <button @click="getData">获取data的数据</button>
  </div>
</template>

<script lang="ts">
//编写业务逻辑的地方

//从vue的包中导入ref响应式对象的方法
import {ref} from 'vue'
import {useRoute} from 'vue-router'
export default{//默认暴露出这个对象

  //选项式API的写法--vue2
  //选项式API的写法使用包含多个的选项进行描述业务逻辑,比如data\methods\computed\watch.....
  //选项中定义的函数方法都会暴露再函数内部的this上，this它会指向到当前组件实例（homeView）
//   data(){ //定义响应方法
//     return{
//       msg:'选项式API的数据',
//       message:'hello Vue2'
//     }
//   },
// methods:{
//   // clickBtn:function(){

//   //   }
//   clickBtn(){
//     alert('Hello 选项式')
//     },
//     //访问data中定义的数据
//     getData(){
//       //访问数据和函数方法需要通过this去访问
//       console.log(this.msg);
//       this.clickBtn()
//     }
//   }

  //组合式API的写法（当前业务setup组合外部引入的对象（ref....）进行的使用
  setup(){

    //获取路由传递过来的数据
    const route=useRoute()
    console.log('query:',route.query);

    //定义数据
    const msg=ref('Hello Vue3!')
    const message=ref('组合式API')

    function clickBtn(){
      alert(msg.value)
    }

    function getData(){
      console.log(message.value);
      clickBtn()
    }


    //返回
    return{
      msg,
      message,
      clickBtn,
      getData
    }
  }
}
</script>
<!-- 编写css样式的地方 -->
<!-- Less或scss，是css的预处理工具，能够帮助我们更加简单的编写样式结构 -->
<!-- 使用Less或scss需要安装插件 -->
<!-- npm install less less-loader -->
<style lang="less">
//css的写法:使用层级递进的方式编写样式
/**
.home h1{
  color:red;
}
.home ul li :nth-child(2n+1){
  background-color: red;
}
.home ul li:nth-child(2n){
  background-color: green;
}
**/
//less的写法:使用嵌套结构编写样式
.home{
  h1{
    color:red;
  }
ul{
    //&:继承上层选择器的属性
    li{
        background-color:red;

      &:nth-child(2n){
        background-color: green;
      }
    }
  }
}
</style>
<!-- npm run dev 必须指定到当前目录-->